<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>项目准备 | 优医问诊H5</title>
    <meta name="description" content="最新Vue3技术栈,Vue3,TS,Pinia,Vant,在线问诊项目,H5">
    <link rel="preload stylesheet" href="/hm-docs/assets/style.f60a3f91.css" as="style">
    <script type="module" src="/hm-docs/assets/app.5c44d29a.js"></script>
    <link rel="preload" href="/hm-docs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/hm-docs/assets/chunks/framework.956eca13.js">
  <link rel="modulepreload" href="/hm-docs/assets/chunks/theme.bb7bd755.js">
  <link rel="modulepreload" href="/hm-docs/assets/geek-park_01-项目准备.md.23a5f83b.lean.js">
  <link rel="icon" type="image/svg+xml" href="./logo2.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-99cf8a88><!--[--><!--]--><!--[--><span tabindex="-1" data-v-ae3e3f51></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ae3e3f51> Skip to content </a><!--]--><!----><header class="VPNav" data-v-99cf8a88 data-v-7e5bc4a5><div class="VPNavBar" data-v-7e5bc4a5 data-v-381568bf><div class="container" data-v-381568bf><div class="title" data-v-381568bf><div class="VPNavBarTitle" data-v-381568bf data-v-305adf00><a class="title" href="/hm-docs/" data-v-305adf00><!--[--><!--]--><!--[--><img class="VPImage logo" src="/hm-docs/logo2.png" alt data-v-6db2186b><!--]--><!--[-->优医问诊H5<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-381568bf><div class="curtain" data-v-381568bf></div><div class="content-body" data-v-381568bf><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-381568bf><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-381568bf data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue2/base.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->vue2<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue2/vuex.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->vuex<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/interview/%E9%9D%A2%E7%BB%8FH5%E7%AB%AF01.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->面经<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/hr/Day01-%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D%E5%8F%8A%E5%88%9D%E5%A7%8B%E5%8C%96-%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->人资<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/hmzs/%E5%89%8D%E5%8F%B0%E5%8F%AF%E8%A7%86%E5%8C%96/01-%E9%A1%B9%E7%9B%AE%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->黑马智数<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/mini-rabbit/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->小兔鲜儿<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/ts/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->TypeScript<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue3/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Vue3<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/pinia/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Pinia<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/project/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->优医问诊<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/other-resource/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->其它<!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-381568bf data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-381568bf data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink" href="https://gitee.com/luckybo0027" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-36371990><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-381568bf data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink" href="https://gitee.com/luckybo0027" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-36371990><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-381568bf data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><!----><!----><div class="VPContent" id="VPContent" data-v-99cf8a88 data-v-97b5189c><div class="VPDoc has-aside" data-v-97b5189c data-v-e9631fd0><!--[--><!--]--><div class="container" data-v-e9631fd0><div class="aside" data-v-e9631fd0><div class="aside-curtain" data-v-e9631fd0></div><div class="aside-container" data-v-e9631fd0><div class="aside-content" data-v-e9631fd0><div class="VPDocAside" data-v-e9631fd0 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-b0ff2abe><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e9631fd0><div class="content-container" data-v-e9631fd0><!--[--><!--]--><!----><main class="main" data-v-e9631fd0><div style="position:relative;" class="vp-doc _hm-docs_geek-park_01-%E9%A1%B9%E7%9B%AE%E5%87%86%E5%A4%87" data-v-e9631fd0><div><h1 id="项目准备" tabindex="-1">项目准备 <a class="header-anchor" href="#项目准备" aria-label="Permalink to &quot;项目准备&quot;">​</a></h1><h2 id="项目地址" tabindex="-1">项目地址 <a class="header-anchor" href="#项目地址" aria-label="Permalink to &quot;项目地址&quot;">​</a></h2><blockquote><p>项目所有代码会提交到码云仓库。</p></blockquote><p>码云地址：<a href="https://gitee.com/luckybo0027" target="_blank" rel="noreferrer">https://gitee.com/luckybo0027</a></p><h2 id="创建新项目" tabindex="-1">创建新项目 <a class="header-anchor" href="#创建新项目" aria-label="Permalink to &quot;创建新项目&quot;">​</a></h2><blockquote><p>目标：使用脚手架命令创新项目</p></blockquote><h3 id="操作步骤" tabindex="-1">操作步骤 <a class="header-anchor" href="#操作步骤" aria-label="Permalink to &quot;操作步骤&quot;">​</a></h3><ol><li>通过命令行创建项目</li></ol><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npx</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">create-react-app</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">ts-geek-park-h5</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">--template</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">typescript</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>删除 <code>src</code> 目录中的所有文件</li><li>修改页面模板 <code>public/index.html</code> 中的页面标题</li></ol><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">极客园App</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="4"><li>新建项目根组件 <code>src\App.tsx</code></li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">export default function App() {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  return (</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    &lt;div&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;h1&gt;极客园根组件&lt;/h1&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    &lt;/div&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  )</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="5"><li>新建项目入口文件 <code>src\index.tsx</code></li></ol><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createRoot</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">react-dom/client</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> App </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./App</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./store</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> root </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createRoot</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">root</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(&lt;</span><span style="color:#FFCB6B;">App</span><span style="color:#A6ACCD;"> /&gt;)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="项目结构参考" tabindex="-1">项目结构参考 <a class="header-anchor" href="#项目结构参考" aria-label="Permalink to &quot;项目结构参考&quot;">​</a></h3><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">/src</span></span>
<span class="line"><span style="color:#A6ACCD;">  /assets         项目资源</span></span>
<span class="line"><span style="color:#A6ACCD;">  /components     通用组件</span></span>
<span class="line"><span style="color:#A6ACCD;">  /pages          页面组件</span></span>
<span class="line"><span style="color:#A6ACCD;">  /store          仓库</span></span>
<span class="line"><span style="color:#A6ACCD;">  /utils          工具封装</span></span>
<span class="line"><span style="color:#A6ACCD;">  App.tsx         根组件</span></span>
<span class="line"><span style="color:#A6ACCD;">  index.tsx       项目入口</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="配置-sass-支持" tabindex="-1">配置 SASS 支持 <a class="header-anchor" href="#配置-sass-支持" aria-label="Permalink to &quot;配置 SASS 支持&quot;">​</a></h2><blockquote><p>目标：让项目样式支持使用 SASS/SCSS 语法编写</p></blockquote><p><strong>操作步骤</strong></p><ol><li>安装 <code>sass</code></li></ol><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">sass</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>拷贝项目素材</li></ol><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 拷贝 `assets` 文件夹 到 `src` 目录下</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="3"><li>项目入口<code>src\index.tsx</code> 导入公用样式文件</li></ol><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./assets/styles/index.scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><h2 id="react-样式冲突" tabindex="-1">react 样式冲突 <a class="header-anchor" href="#react-样式冲突" aria-label="Permalink to &quot;react 样式冲突&quot;">​</a></h2><h3 id="组件样式覆盖问题" tabindex="-1">组件样式覆盖问题 <a class="header-anchor" href="#组件样式覆盖问题" aria-label="Permalink to &quot;组件样式覆盖问题&quot;">​</a></h3><ul><li>在 Layout 组件的<code>index.scss</code>中添加样式</li></ul><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">navBar</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pink</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>在<code>Home</code>组件中的样式也跟着发生了改变，说明组件中的样式是相互影响的。</li><li>原因：在配置路由时，Layout 和 Home 组件都被导入到项目中，那么组件的样式也就被导入到项目中了。如果组件之间样式名称相同，那么一个组件中的样式就会在另一个组件中也生效，从而造成组件之间样式相互覆盖的问题。</li><li>结论：默认，只要导入了组件，不管组件有没有显示在页面中，组件的样式就会生效。</li><li>解决方案 <ul><li>手动处理 （起不同的类名）</li><li><code>CSS IN JS</code> ： 以 js 的方式来处理 css</li><li>css 不是一门编程语言，css 没有所有的局部作用域全局作用域这样的区分。。。css 只有全局作用域</li></ul></li></ul><h3 id="css-in-js" tabindex="-1">CSS IN JS <a class="header-anchor" href="#css-in-js" aria-label="Permalink to &quot;CSS IN JS&quot;">​</a></h3><ul><li><p>CSS IN JS：是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题</p></li><li><p><a href="https://github.com/MicheleBertoli/css-in-js" target="_blank" rel="noreferrer">CSS IN JS</a> 的具体实现有 50 多种，比如：CSS Modules、<a href="https://www.styled-components.com/" target="_blank" rel="noreferrer">styled-components</a> 等</p></li><li><p>推荐使用：<a href="https://github.com/css-modules/css-modules" target="_blank" rel="noreferrer">CSS Modules</a> （React 脚手架已集成，可直接使用）</p></li></ul><h3 id="css-modules-的说明" tabindex="-1">CSS Modules 的说明 <a class="header-anchor" href="#css-modules-的说明" aria-label="Permalink to &quot;CSS Modules 的说明&quot;">​</a></h3><ul><li>CSS Modules 通过对 CSS 类名重命名，保证每个类名的唯一性，从而避免样式冲突的问题</li><li>换句话说：所有类名都具有“局部作用域”，只在当前组件内部生效</li><li>在 React 脚手架中：文件名、类名、hash（随机）三部分，只需要指定类名即可 BEM</li><li><code>xxxx.module.css</code></li></ul><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">/* 自动生成的类名，我们只需要提供 classname 即可 */</span></span>
<span class="line"><span style="color:#A6ACCD;">[filename]_[classname]_[hash]</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// 类名</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">error</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">red</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">// 生成的类名为：</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">NavHeader_error__ax7yz</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">NavHead_red_abcdc;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="css-module-配合-sass" tabindex="-1">css module 配合 sass <a class="header-anchor" href="#css-module-配合-sass" aria-label="Permalink to &quot;css module 配合 sass&quot;">​</a></h3><ul><li>css moudule 也可以配合 sass 来使用，创建名为<code>[name].module.scss</code></li></ul><div class="language-css line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">father</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  .son {</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">30px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  :global </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    .son2 {</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ul><li>使用 css modules 解决 Login 组件样式冲突问题</li></ul><h3 id="css-modules-的使用步骤" tabindex="-1">css modules 的使用步骤 <a class="header-anchor" href="#css-modules-的使用步骤" aria-label="Permalink to &quot;css modules 的使用步骤&quot;">​</a></h3><ol><li>把<code>index.scss</code>改成<code>index.module.scss</code></li></ol><div class="language-scss line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">list</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pink</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">global {</span></span>
<span class="line"><span style="color:#A6ACCD;">        xxxx</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="2"><li>导入样式的时候进行修改</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> import &#39;./index.scss&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;"> import styles from &#39;./index.module.scss&#39;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li>使用的时候需要修改</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;"> &lt;div className=&quot;list&quot;&gt;文章列表组件&lt;/div&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;"> &lt;div className={styles.list}&gt;文章列表组件&lt;/div&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="配置-antd-mobile-组件库" tabindex="-1">配置 <code>antd-mobile</code> 组件库 <a class="header-anchor" href="#配置-antd-mobile-组件库" aria-label="Permalink to &quot;配置 `antd-mobile` 组件库&quot;">​</a></h2><blockquote><p>目标：安装本项目使用的 <code>UI</code> 组件库 Ant Design Mobile，并通过 Babel 插件实现按需加载</p></blockquote><p>官方文档(国内站点)：<a href="https://antd-mobile.gitee.io/zh" target="_blank" rel="noreferrer">https://antd-mobile.gitee.io/zh</a></p><p>官方文档(全球站点)：<a href="https://mobile.ant.design/zh" target="_blank" rel="noreferrer">https://mobile.ant.design/zh</a></p><p><strong>操作步骤</strong></p><ol><li>安装 <code>antd-mobile</code></li></ol><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">antd-mobile</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="3"><li>使用组件</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import { Button } from &#39;antd-mobile&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">export default function App() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;div&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;h1&gt;极客园根组件&lt;/h1&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;Button color=&quot;primary&quot;&gt;按钮&lt;/Button&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  )</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul><li><code>antd-mobile v5</code> 版支持按需加载，无需额外配置</li></ul><h2 id="配置路径别名" tabindex="-1">配置路径别名 @ <a class="header-anchor" href="#配置路径别名" aria-label="Permalink to &quot;配置路径别名 @&quot;">​</a></h2><blockquote><p>目标：让代码中支持以 <code>@/xxxx</code> 形式的路径来导入文件</p></blockquote><p><a href="https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration" target="_blank" rel="noreferrer">craco 配置文档</a></p><p><strong>操作步骤</strong></p><ol><li>安装修改 CRA 配置的包：</li></ol><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-D</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@craco/craco</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>在<strong>项目根目录</strong>中创建 craco 的配置文件：<code>craco.config.js</code>，并添加如下代码：</li></ol><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> path </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">path</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// webpack 配置</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#F07178;">webpack</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#676E95;font-style:italic;">// 配置别名</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#F07178;">alias</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#676E95;font-style:italic;">// 约定：使用 @ 表示 src 文件所在路径</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">@</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> path</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#A6ACCD;">(__dirname</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">src</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ol start="3"><li>在项目<strong>根目录中新建</strong> <code>path.tsconfig.json</code>，并添加如下代码：</li></ol><div class="language-json line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">compilerOptions</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">baseUrl</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&quot;</span><span style="color:#FFCB6B;">paths</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F78C6C;">@/*</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">[</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">src/*</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">]</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ol start="4"><li>根目录的<code>tsconfig.json</code> 引入路径配置</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">{</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  &quot;extends&quot;: &quot;./path.tsconfig.json&quot;,</span></span>
<span class="line"><span style="color:#A6ACCD;">  &quot;compilerOptions&quot;: {</span></span>
<span class="line"><span style="color:#A6ACCD;">    &quot;target&quot;: &quot;es5&quot;,</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="5"><li><code>package.json</code> 修改启动命令</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">&quot;scripts&quot;: {</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">    &quot;start&quot;: &quot;react-scripts start&quot;,</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">    &quot;build&quot;: &quot;react-scripts build&quot;,</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">    &quot;test&quot;: &quot;react-scripts test&quot;,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    &quot;start&quot;: &quot;craco start&quot;,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    &quot;build&quot;: &quot;craco build&quot;,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    &quot;test&quot;: &quot;craco test&quot;,</span></span>
<span class="line"><span style="color:#A6ACCD;">    &quot;eject&quot;: &quot;react-scripts eject&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">  },</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ol start="6"><li>测试路径导入</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">import { Button } from &#39;antd-mobile&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import imageNone from &#39;@/assets/none.png&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">export default function App() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;div&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;h1&gt;极客园根组件&lt;/h1&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;Button color=&quot;primary&quot;&gt;按钮&lt;/Button&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;img src={imageNone} alt=&quot;&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  )</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ol start="7"><li>💥 重启脚手架 💥</li></ol><h2 id="配置视口单位插件" tabindex="-1">配置视口单位插件 <a class="header-anchor" href="#配置视口单位插件" aria-label="Permalink to &quot;配置视口单位插件&quot;">​</a></h2><blockquote><p>目标：通过 <code>webpack</code> 插件将 <code>px</code> 单位自动转换成视口长度单位 <code>vw/vh</code>，实现页面对不同屏幕的自动适配</p></blockquote><p><strong>分析说明</strong>：</p><p>适配概述</p><ul><li>为什么要适配？ <ul><li>为了让我们开发的移动端项目页面，在不同尺寸大小的移动端设备（手机）中，保持相同的比例</li></ul></li><li>适配原理 <ul><li>选择某个手机的尺寸大小作为基准，其他手机进行<strong>等比例缩放</strong></li><li>一般选择 <code>iPhone 6</code>（2 倍屏幕），屏幕宽度为：<code>375px</code></li></ul></li><li>适配方式 <ul><li>rem：需要手动修改 <code>html</code> 元素的 <code>font-size</code>；额外设置 <code>body</code> 元素的字体大小为正常值</li><li>vw：一 1 <code>vw</code> 等于屏幕宽度的 <code>1%</code></li><li>vh: 屏幕高度的 1%</li></ul></li></ul><p><strong>操作步骤</strong></p><ol><li>安装 <code>postcss-px-to-viewport</code><ul><li>包的作用：将 <code>px</code> 转化为 <code>vw</code>，所以有了该工具，只需要在代码中写 <code>px</code> 即可</li></ul></li></ol><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">postcss-px-to-viewport</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-D</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>在 <code>craco.config.js</code> 添加相应配置</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">const pxToViewport = require(&#39;postcss-px-to-viewport&#39;)</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">const vw = pxToViewport({</span></span>
<span class="line"><span style="color:#A6ACCD;">  // 视口宽度，一般就是 375（ 设计稿一般采用二倍稿，宽度为 375 ）</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  viewportWidth: 375</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">module.exports = {</span></span>
<span class="line"><span style="color:#A6ACCD;">  // 此处省略 webpack 配置</span></span>
<span class="line"><span style="color:#A6ACCD;">  webpack: {},</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  style: {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    postcss: {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      mode: &quot;extends&quot;,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      loaderOptions:{</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        postcssOptions: {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">          ident:&quot;postcss&quot;,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">          plugins: [vw]</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        }</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      }</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    }</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><ol start="3"><li>在 <code>src\assets\styles\index.scss</code> 添加测试类名</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">.testBox {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  width: 100px;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  height: 100px;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  background-color: pink;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="4"><li>在 <code>src\App.tsx</code> 使用测试类名</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">import { Button } from &#39;antd-mobile&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">import imageNone from &#39;@/assets/none.png&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">export default function App() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;div&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;h1&gt;极客园根组件&lt;/h1&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;Button color=&quot;primary&quot;&gt;按钮&lt;/Button&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;img src={imageNone} alt=&quot;&quot; /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;div className=&quot;testBox&quot;&gt;盒子&lt;/div&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  )</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ol start="5"><li>💥 重启脚手架 💥</li></ol><h2 id="移动端1px像素边框" tabindex="-1">移动端<code>1px</code>像素边框 <a class="header-anchor" href="#移动端1px像素边框" aria-label="Permalink to &quot;移动端`1px`像素边框&quot;">​</a></h2><blockquote><p>目标： 解决移动端 Web 开发中，在高清屏机型中，<code>1px</code> 会比较粗的问题。</p></blockquote><p><img src="/hm-docs/assets/image-20211119075243516.1023053d.png" alt="image-20211119075243516" data-fancybox="gallery"></p><p><strong>实现方案</strong></p><ul><li><a href="https://github.com/ant-design/ant-design-mobile/blob/v2/components/style/mixins/hairline.less" target="_blank" rel="noreferrer">参考 antd-mobile 的实现</a></li><li><a href="https://juejin.cn/post/6994196887402184734" target="_blank" rel="noreferrer">实现原理</a></li><li>实现原理核心：<strong>伪元素 + transform 根据比例缩放</strong><ul><li>伪元素 <code>::after</code> 或 <code>::before</code> 独立于当前元素，可以单独对其缩放而不影响元素本身的缩放</li></ul></li></ul><p><strong>素材代码</strong></p><div class="language-scss line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">素材文件： src/assets/styles/hairline</span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">scss</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li>使用方式，支持全边框和上下左右四个方向。</li></ul><div class="language-scss line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">@include</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hairline</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">all</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">, </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">f00</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">@include</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hairline</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">top</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">, </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">f00</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">@include</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hairline</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">, </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">f00</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">@include</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hairline</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">bottom</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">, </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">f00</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">@include</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hairline</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">left</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">, </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">f00</span><span style="color:#89DDFF;">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 第三个参数可设置圆角</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">@include</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hairline</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">all</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">, </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">f00, </span><span style="color:#F78C6C;">100px</span><span style="color:#89DDFF;">);</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul><li>项目使用： <ol><li>导入 <code>hairline.scss</code> 文件</li><li>调用 <code>@include hairline(&#39;方向&#39;, 颜色);</code></li></ol></li></ul><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// 导入 hairline.scss 文件并使用</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">@import &#39;@/assets/styles/hairline.scss&#39;;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">.testBox_hairline {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  width: 100px;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  height: 100px;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  background-color: tan;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  @include hairline(&#39;all&#39;, #f00);</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">// 页面组件中使用</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">{/* 普通 1px 边框 */}</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">&lt;div className=&quot;testBox&quot;&gt;&lt;/div&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">{/* 优化后 1px 边框 */}</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">&lt;div className=&quot;testBox_hairline&quot;&gt;&lt;/div&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="配置路由" tabindex="-1">配置路由 <a class="header-anchor" href="#配置路由" aria-label="Permalink to &quot;配置路由&quot;">​</a></h2><blockquote><p>目标：安装 <code>react-router-dom</code>，创建 <code>App</code> 根组件并在该组件中配置路由</p></blockquote><p><strong>操作步骤</strong></p><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">react-router-dom</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>创建布局容器组件 <code>src\pages\Layout\index.tsx</code></li></ol><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Layout</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">我是布局容器组件</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">&gt;;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li>创建登录页面组件 <code>src\pages\Login\index.tsx</code></li></ol><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Login</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h2</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">我是登录页</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h2</span><span style="color:#89DDFF;">&gt;;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li>根组件 <code>src\App.tsx</code> 引入页面组件并配置路由：</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">import React from &#39;react&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import { BrowserRouter as Router, Route, Routes, Navigate } from &#39;react-router-dom&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import Login from &#39;@/pages/Login&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import Layout from &#39;@/pages/Layout&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">export default function App() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;Router&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">          &lt;Routes&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">            &lt;Route path=&#39;/&#39; element={&lt;Navigate to=&#39;/home&#39;&gt;} /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">            &lt;Route path=&quot;/login&quot; element={&lt;Login /&gt;} /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">            &lt;Route path=&quot;/layout&quot; element={&lt;Layout /&gt;} /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">          &lt;/Routes&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;/Router&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  )</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h2 id="路由设置懒加载" tabindex="-1">路由设置懒加载 <a class="header-anchor" href="#路由设置懒加载" aria-label="Permalink to &quot;路由设置懒加载&quot;">​</a></h2><blockquote><p>目标：页面组件过多时，容易造成页面卡顿，使用路由异步加载。</p></blockquote><ol><li>使用 React.lazy()方法，导入组件</li></ol><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> Login </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">lazy</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/pages/Login</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> Layout </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">lazy</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/pages/Layout</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li>使用<code>React.Suspense</code> 组件包裹 Routes 组件，并设置加载状态。</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">&lt;Router&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;React.Suspense fallback={&lt;div&gt;loading...&lt;/div&gt;}&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;Routes&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            &lt;Route path=&quot;/login&quot; component={Login} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            &lt;Route path=&quot;/layout&quot; component={Layout} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;/Routes&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;/React.Suspense&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/Router&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="配置-404-页面" tabindex="-1">配置 404 页面 <a class="header-anchor" href="#配置-404-页面" aria-label="Permalink to &quot;配置 404 页面&quot;">​</a></h2><blockquote><p>目标：路由无法匹配页面组件时，显示 404 页面</p></blockquote><ol><li>创建 404 页面组件 <code>src\pages\NotFound\index.tsx</code></li></ol><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Button</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ErrorBlock</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Space</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">antd-mobile</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useNavigate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">react-router</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">NotFound</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">navigate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useNavigate</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">ErrorBlock</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">你要访问的页面不见了</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#C792EA;">description</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">换个页面试试...</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">      </span><span style="color:#C792EA;">fullPage</span></span>
<span class="line"><span style="color:#89DDFF;">    &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Space</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">primary</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">navigate</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">}&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          返回首页</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">Button</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">navigate</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">}&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          后退一步</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">Button</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">Space</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">ErrorBlock</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;">  )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><ol start="2"><li>根组件 <code>src\App.tsx</code> 引入页面组件：</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">import React from &#39;react&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">import { BrowserRouter as Router, Route, Switch, Redirect, } from &#39;react-router-dom&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">const Login = React.lazy(() =&gt; import(&#39;@/pages/Login&#39;))</span></span>
<span class="line"><span style="color:#A6ACCD;">const Layout = React.lazy(() =&gt; import(&#39;@/pages/Layout&#39;))</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">const NotFound = React.lazy(() =&gt; import(&#39;@/pages/NotFound&#39;))</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">export default function App() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;Router&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;React.Suspense fallback={&lt;div&gt;loading...&lt;/div&gt;}&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;Routes&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            &lt;Route path=&quot;/&quot; element={&lt;Navigate to=&quot;/layout&quot; /&gt;} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            &lt;Route element={&lt;Login /&gt;} path=&quot;/login&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">            &lt;Route element={&lt;Layout /&gt;} path=&quot;/layout&quot; /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">           &lt;Route path=&quot;*&quot; element={&lt;NotFound /&gt;} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          &lt;/Routes&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;/React.Suspense&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;/Router&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  )</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h2 id="配置-redux" tabindex="-1">配置 <code>Redux</code> <a class="header-anchor" href="#配置-redux" aria-label="Permalink to &quot;配置 `Redux`&quot;">​</a></h2><blockquote><p>目标：安装 <code>redux</code> 和相关的依赖包，并创建 Store 实例后关联到应用上</p></blockquote><p>所要用到的依赖包：</p><ul><li><code>redux</code> Reudx 核心包</li><li><code>react-redux </code> React 和 Redux 的绑定库</li><li><code>redux-thunk</code> 中间件，处理 异步 Action</li><li><code>redux-devtools-extension</code> 调试工具</li></ul><p><strong>操作步骤</strong></p><ol><li>安装依赖包</li></ol><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">redux</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">react-redux</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">redux-thunk</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">redux-devtools-extension</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>新建用户模块 <code>src\store\reducers\user.ts</code></li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">const initState = {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  profile: { username: &#39;游客&#39; },</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">export function userReducer(state = initState, action: any) {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  switch (action.type) {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    default:</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      return state</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  }</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ol start="3"><li>新建根 reducer： <code>src\store\reducers\index.ts</code></li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import { combineReducers } from &#39;redux&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import { userReducer } from &#39;./user&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">const rootReducer = combineReducers({</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  user: userReducer,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">})</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">export default rootReducer</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ol start="4"><li>新建仓库入口：<code>src\store\index.ts</code>，创建仓库实例，并配置 <code>thunk中间件</code>和<code>调试工具</code></li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import { applyMiddleware, createStore } from &#39;redux&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import rootReducer from &#39;./reducers&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import thunk from &#39;redux-thunk&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import { composeWithDevTools } from &#39;redux-devtools-extension&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">export default store</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ol start="5"><li>在主入口 <code>index.js</code> 中，配置 <code>Provider</code></li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">import ReactDOM from &#39;react-dom&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">import App from &#39;./App&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">import &#39;./assets/styles/index.scss&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import { Provider } from &#39;react-redux&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import store from &#39;./store&#39;</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">ReactDOM.render(</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  &lt;Provider store={store}&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;App /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  &lt;/Provider&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  , document.getElementById(&#39;root&#39;)</span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="彩色字体图标" tabindex="-1">彩色字体图标 <a class="header-anchor" href="#彩色字体图标" aria-label="Permalink to &quot;彩色字体图标&quot;">​</a></h2><blockquote><p>目标：彩色字体图标的基本使用</p></blockquote><h3 id="引入彩色字体图标" tabindex="-1">引入彩色字体图标 <a class="header-anchor" href="#引入彩色字体图标" aria-label="Permalink to &quot;引入彩色字体图标&quot;">​</a></h3><p><strong>需求</strong></p><ol><li>如果使用普通 <code>class</code> 类名的方式，彩色图标无法生效</li><li>可以通过引入 <code>js</code>文件的方式来使用彩色字体图标</li></ol><p><strong>操作步骤</strong></p><ol><li>在 <code>public\index.html</code> 引入字体图标 <code>js</code> 文件</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;"> &lt;script src=&quot;https://at.alicdn.com/t/font_2503709_f4q9dl3hktl.js&quot;&gt;&lt;/script&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  &lt;/body&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">&lt;/html&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li><code>src\assets\styles\index.scss</code> 添加类名样式</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">/* 字体图标 */</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">.icon {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  width: 1em;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  height: 1em;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  vertical-align: -0.15em;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  fill: currentColor;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  overflow: hidden;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ol start="3"><li>以 <code>svg</code> 方式使用字体图标</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">&lt;svg className=&quot;icon&quot; aria-hidden=&quot;true&quot;&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">  &lt;use xlink:href=&quot;#iconbtn_readingtime&quot;&gt;&lt;/use&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  &lt;use xlinkHref=&quot;#iconbtn_readingtime&quot;&gt;&lt;/use&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">&lt;/svg&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>💥 注意 💥：在 <code>React</code> 项目中 <code>xlink:href</code> 需要写成 <code>xlinkHref</code></p><h2 id="类名拼接辅助库" tabindex="-1">类名拼接辅助库 <a class="header-anchor" href="#类名拼接辅助库" aria-label="Permalink to &quot;类名拼接辅助库&quot;">​</a></h2><p><strong>操作步骤</strong></p><ol><li>安装 <code>classnames</code> ，辅助组件开发时类名拼接。</li></ol><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">npm i classnames</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>使用方式</li></ol><div class="language- line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">import classNames from &#39;classnames&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span>
<span class="line"><span style="color:#A6ACCD;">用法：classNames(&#39;类名1&#39;,&#39;类名2&#39;,&#39;类名3&#39;)</span></span>
<span class="line"><span style="color:#A6ACCD;">处理后返回值：  &#39;类名1 类名2 类名3&#39;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>🔔 优点：</p><ul><li><p>简化拼接类名过程，省去手动加空格。</p></li><li><p>同时会自动过滤掉无效值，如 undefined</p></li><li><p>支持对象写法，类似 Vue 中的动态 class</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">classNames</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">类名</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> 布尔值 </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></li></ul><h1 id="组件封装" tabindex="-1">组件封装 <a class="header-anchor" href="#组件封装" aria-label="Permalink to &quot;组件封装&quot;">​</a></h1><h2 id="icon-图标组件封装" tabindex="-1"><code>Icon</code> 图标组件封装 <a class="header-anchor" href="#icon-图标组件封装" aria-label="Permalink to &quot;`Icon` 图标组件封装&quot;">​</a></h2><h3 id="封装-svg-图标组件" tabindex="-1">封装 <code>svg</code> 图标组件 <a class="header-anchor" href="#封装-svg-图标组件" aria-label="Permalink to &quot;封装 `svg` 图标组件&quot;">​</a></h3><blockquote><p>目标：实现一个用于在页面上显示 <code>svg</code> 小图标的组件，方便后续开发中为界面添加小图标。</p></blockquote><p><img src="/hm-docs/assets/image-20210905204352596.c3988345.png" alt="image-20210905204352596" data-fancybox="gallery"></p><p>实现思路：</p><ul><li>在组件中，输出一段使用 <code>&lt;use&gt;</code> 标签引用事先准备好的 <code>SVG</code> 图片资源的 <code>&lt;svg&gt;</code> 代码</li><li>组件需要传入 <code>SVG</code> 图片的名字，用来显示不同的图标</li><li>组件可以设置额外的样式类名、及点击事件监听</li></ul><p><strong>操作步骤</strong></p><ol><li>安装 <code>classnames</code> ，辅助组件开发时类名拼接。</li></ol><div class="language-bash line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">classnames</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ol start="2"><li>创建 <code>src\components\Icon\index.tsx</code> ，编写图标组件：</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">import classNames from &#39;classnames&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">type Props = {</span></span>
<span class="line"><span style="color:#A6ACCD;">  type: string;</span></span>
<span class="line"><span style="color:#A6ACCD;">  className?: string;</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">export default function Icon({ type, className }: Props) {</span></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;svg className={classNames(&#39;icon&#39;, className)} aria-hidden=&#39;true&#39;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;use xlinkHref={`#${type}`}&gt;&lt;/use&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/svg&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  )</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ol start="3"><li>测试组件，确认能否正确显示出图标</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import Icon from &#39;@/components/Icon&#39;;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">export default function Layout() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;h1&gt;我是布局容器组件&lt;/h1&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;svg className=&quot;icon&quot; aria-hidden=&quot;true&quot;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;use xlinkHref=&quot;#iconbtn_readingtime&quot;&gt;&lt;/use&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;/svg&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;Icon type=&quot;iconbtn_readingtime&quot; className=&quot;testBox&quot; /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  )</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="升级图标组件" tabindex="-1">升级图标组件 <a class="header-anchor" href="#升级图标组件" aria-label="Permalink to &quot;升级图标组件&quot;">​</a></h3><p><strong>需求分析</strong></p><ul><li><code>type</code> 属性没有图标名提示</li><li>不能添加类名修改图标大小</li><li>不能注册点击事件</li></ul><p><strong>操作步骤</strong></p><ol><li>添加图标 <code>type</code> 类型</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">import classNames from &#39;classnames&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">type Props = {</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">  type: string;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  type: IconType;</span></span>
<span class="line"><span style="color:#A6ACCD;">  className?: string;</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">export default function Icon({ type, className }: Props) {</span></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;svg {...rest} className={classNames(&#39;icon&#39;, className)} aria-hidden=&#39;true&#39;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;use xlinkHref={`#${type}`}&gt;&lt;/use&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/svg&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  )</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">type IconType =</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconphoto-fail&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconphoto&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_right&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconicon_unenjoy1&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconicon_feedback1&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconicon_upload&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbianji&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;icongengduo&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconfanhui&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_history1&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_readingtime&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_like2&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_pic&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_mine&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_channel&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_channel_close&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_comment&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_home_sel&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_collect_sel&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_mine_sel&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_collect&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_qa_sel&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_like_sel&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_feedback&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_del&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_tag_close&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_essay_close&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_qa&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_myworks&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconicon_blacklist&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_mycollect&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_video_sel&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_share&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_mymessages&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_search&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_like&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_xiaozhitongxue&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_video&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  | &quot;iconbtn_home&quot;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br></div></div><ol start="2"><li>添加点击事件</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">import classNames from &#39;classnames&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">type Props = {</span></span>
<span class="line"><span style="color:#A6ACCD;">  type: IconType;</span></span>
<span class="line"><span style="color:#A6ACCD;">  className?: string;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  onClick?: () =&gt; void</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">export default function Icon({ type, className }: Props) {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">export default function Icon({ type, className, onClick }: Props) {</span></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#F07178;">    &lt;svg className={classNames(&#39;icon&#39;, className)} aria-hidden=&#39;true&#39;&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    &lt;svg onClick={onClick} className={classNames(&#39;icon&#39;, className)} aria-hidden=&#39;true&#39;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;use xlinkHref={`#${type}`}&gt;&lt;/use&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/svg&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  )</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><ol start="3"><li>测试图标名称提示和点击事件</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">import Icon from &#39;@/components/Icon&#39;;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">export default function Layout() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;h1&gt;我是布局容器组件&lt;/h1&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;svg className=&quot;icon&quot; aria-hidden=&quot;true&quot;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        &lt;use xlinkHref=&quot;#iconbtn_readingtime&quot;&gt;&lt;/use&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;/svg&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;Icon type=&quot;iconbtn_readingtime&quot; className=&quot;testBox&quot; /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;Icon type=&quot;iconbtn_like_sel&quot; className=&quot;testBox&quot; onClick={() =&gt; alert(&#39;点赞成功~&#39;)} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  )</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="navbar-导航栏组件封装" tabindex="-1"><code>NavBar</code> 导航栏组件封装 <a class="header-anchor" href="#navbar-导航栏组件封装" aria-label="Permalink to &quot;`NavBar` 导航栏组件封装&quot;">​</a></h2><blockquote><p>目标：封装顶部导航栏组件，可以用来显示页面标题、后退按钮、及添加额外的功能区域</p></blockquote><p>图例一：</p><img src="/hm-docs/assets/image-20210831163053705.72048329.png" alt="image-20210831163053705" style="zoom:30%;"><p>图例二：</p><img src="/hm-docs/assets/image-20210831163126729.8e9d78c0.png" alt="image-20210831163126729" style="zoom:30%;"><p>图例三：</p><img src="/hm-docs/assets/image-20210831205954290.7880d760.png" alt="image-20210831205954290" style="zoom:30%;"><p>实现思路：</p><ul><li>组件布局分为：左、中、右三个区域</li><li>可通过组件属性传入内容，填充中间和右边区域</li><li>可为左边的“后退”按钮添加事件监听</li></ul><p><strong>静态结构</strong></p><ul><li>基础结构：<code>src\components\NavBar\index.tsx</code></li></ul><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Icon </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/components/Icon</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> styles </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./index.module.scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">NavBar</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">styles</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">}&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">main</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span><span style="color:#676E95;font-style:italic;">/* 后退按钮 */</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">left</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconfanhui</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span><span style="color:#676E95;font-style:italic;">/* 居中标题 */</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">title</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">标题</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span><span style="color:#676E95;font-style:italic;">/* 右侧内容 */</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">右侧</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;">  )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><ul><li>样式 <code>src\components\NavBar\index.module.scss</code></li></ul><div class="language-scss line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 导入 hiarline.scss 文件</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">@import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/assets/styles/hairline.scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">root</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">46px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">global {</span></span>
<span class="line"><span style="color:#A6ACCD;">    .main {</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">height</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">46px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100%</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> relative</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> flex</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">align-items</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">fff</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#676E95;font-style:italic;">// 1px 项目边框处理</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;font-style:italic;">@include</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hairline</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">bottom</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">, </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">ccc</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">fixed</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> fixed</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">z-index</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">999</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">left</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">48px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">display</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> flex</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">justify-content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">align-items</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">icon</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">16px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">ddd</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">title</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">flex</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">margin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;"> auto</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">323233</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">font-weight</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">500</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">font-size</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">16px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">text-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">right</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">padding-right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">16px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">48px</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br></div></div><h2 id="导航栏组件封装-属性升级" tabindex="-1">导航栏组件封装-属性升级 <a class="header-anchor" href="#导航栏组件封装-属性升级" aria-label="Permalink to &quot;导航栏组件封装-属性升级&quot;">​</a></h2><p><strong>操作步骤</strong></p><ol><li>升级属性</li></ol><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Icon </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/components/Icon</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> styles </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./index.module.scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">useNavigate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">react-router</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">NavBar</span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">children</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">extra</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">onBack</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">navigate</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">useNavigate</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">back</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">onBack</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">onBack</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#82AAFF;">navigate</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;">};</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">styles</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">}&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">{</span><span style="color:#676E95;font-style:italic;">/* 后退按钮 */</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">left</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconfanhui</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onClick</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">back</span><span style="color:#89DDFF;">} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">{</span><span style="color:#676E95;font-style:italic;">/* 居中标题 */</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">title</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;{</span><span style="color:#A6ACCD;">children</span><span style="color:#89DDFF;">}&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">{</span><span style="color:#676E95;font-style:italic;">/* 右侧内容 */</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">right</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;{</span><span style="color:#A6ACCD;">extra</span><span style="color:#89DDFF;">}&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;">  )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><ol start="2"><li>测试组件功能</li></ol><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">NavBar</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onLeftClick</span><span style="color:#89DDFF;">={()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">alert</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">123</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">} </span><span style="color:#C792EA;">rightContent</span><span style="color:#89DDFF;">={&lt;</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">右侧内容</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">&gt;}&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  标题内容</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">NavBar</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-e9631fd0 data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-149a99df>更新: <time datetime="2023-08-31T13:50:55.000Z" data-v-149a99df></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter" data-v-99cf8a88 data-v-f4388a15><div class="container" data-v-f4388a15><p class="message" data-v-f4388a15>Released under the MIT License.</p><p class="copyright" data-v-f4388a15>Copyright © 2022-present Shugang Zhou 传智教育</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"d89339df\",\"electron_eletron.md\":\"f78b205d\",\"hmzs_前台可视化_04-部署上线说明.md\":\"b689f494\",\"geek-park_03-布局容器.md\":\"f9a95023\",\"hmzs_前台可视化_03-接入微前端.md\":\"e4e73fe1\",\"geek-park_index.md\":\"274ee860\",\"hr_day01-项目介绍及初始化-登录页面.md\":\"a87e2d0f\",\"hmzs_前台可视化_01-项目环境搭建.md\":\"7fa65aa4\",\"hr_day02-登录模块-主页鉴权.md\":\"7c74ca95\",\"geek-park_02-登录页面.md\":\"6ab1a2cf\",\"memory.md\":\"22cd8c53\",\"mini-rabbit_01-项目.md\":\"3c3d7316\",\"geek-park_01-项目准备.md\":\"23a5f83b\",\"hr_day10-首页图表-nginx上线.md\":\"8a2d49ab\",\"other-resource_index.md\":\"e64d1d24\",\"mini-rabbit_04-分类.md\":\"26f22ed4\",\"interview_面经pc端02.md\":\"88e355b4\",\"hr_day05-组织架构-角色管理.md\":\"bef256c2\",\"hr_day08-cos上传和权限数据.md\":\"c03b8bcb\",\"hr_day03-主页模块-修改密码.md\":\"bc380dd0\",\"mini-rabbit_index.md\":\"9e57a010\",\"hr_day04-组织架构.md\":\"e838901c\",\"hmzs_前台可视化_02-大屏可视化.md\":\"98a26e50\",\"mini-rabbit_09-购物车.md\":\"0a823f26\",\"pinia_index.md\":\"e132c8fe\",\"ts_pro.md\":\"fe9a6545\",\"hr_day06-角色管理-员工管理.md\":\"beb02c6b\",\"mini-rabbit_03-推荐.md\":\"faed0355\",\"mini-rabbit_06-地址.md\":\"1fc49004\",\"interview_面经h5端02.md\":\"a7342342\",\"mini-rabbit_08-sku.md\":\"0775a2c7\",\"ts_backup.md\":\"55f33e6d\",\"hr_day07-员工管理-上传下载.md\":\"dea880ea\",\"vue2_base.md\":\"b804c94a\",\"project_super-doctor.md\":\"f0b1af73\",\"interview_面经h5端01.md\":\"e9040838\",\"geek-park_04-个人中心.md\":\"f16a09df\",\"ts_case.md\":\"7cd17957\",\"vue3_index.md\":\"5e17a031\",\"interview_面经pc端01.md\":\"d7141b56\",\"ts_index.md\":\"a01dfcff\",\"vue3_case.md\":\"d48addba\",\"project_login.md\":\"c54c8b93\",\"project_index.md\":\"6674c051\",\"mini-rabbit_02-首页.md\":\"299b4f8e\",\"project_end.md\":\"cb143198\",\"vue2_vuex.md\":\"a087fc79\",\"ts_advanced.md\":\"319200c0\",\"ts_core.md\":\"fb357910\",\"project_home.md\":\"86083086\",\"project_user.md\":\"c888dc36\",\"vue3_composition.md\":\"72ec4356\",\"mini-rabbit_07-详情.md\":\"1fe593a3\",\"mini-rabbit_10-订单.md\":\"732bea0a\",\"project_consult.md\":\"44bd936e\",\"project_room.md\":\"e43da8e9\",\"mini-rabbit_05-登录.md\":\"0cae2bde\",\"project_order.md\":\"8793ea0c\",\"project_consult-order.md\":\"8f1e59fa\",\"hr_day09-权限应用-首页.md\":\"4ca0b809\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"优医问诊H5\",\"description\":\"最新Vue3技术栈,Vue3,TS,Pinia,Vant,在线问诊项目,H5\",\"base\":\"/hm-docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo2.png\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"vue2\",\"link\":\"/vue2/base\"},{\"text\":\"vuex\",\"link\":\"/vue2/vuex\"},{\"text\":\"面经\",\"link\":\"/interview/面经H5端01\"},{\"text\":\"人资\",\"link\":\"/hr/Day01-项目介绍及初始化-登录页面\"},{\"text\":\"黑马智数\",\"link\":\"/hmzs/前台可视化/01-项目环境搭建\"},{\"text\":\"小兔鲜儿\",\"link\":\"/mini-rabbit/\"},{\"text\":\"TypeScript\",\"link\":\"/ts/\"},{\"text\":\"Vue3\",\"link\":\"/vue3/\"},{\"text\":\"Pinia\",\"link\":\"/pinia/\"},{\"text\":\"优医问诊\",\"link\":\"/project/\"},{\"text\":\"其它\",\"link\":\"/other-resource/\"}],\"sidebar\":{\"/vu2/\":[{\"text\":\"vue基础\",\"items\":[{\"text\":\"vue基础\",\"link\":\"/vu2/base\"}]}],\"/interview/\":[{\"text\":\"面经H5\",\"items\":[{\"text\":\"面经H5端-（上）\",\"link\":\"/interview/面经H5端01\"},{\"text\":\"面经H5端-（下）\",\"link\":\"/interview/面经H5端02\"},{\"text\":\"面经PC端-（上）\",\"link\":\"/interview/面经PC端01\"},{\"text\":\"面经PC端-（下）\",\"link\":\"/interview/面经PC端02\"}]}],\"/hr/\":[{\"text\":\"面经H5\",\"items\":[{\"text\":\"Day01\",\"link\":\"/hr/Day01-项目介绍及初始化-登录页面\"},{\"text\":\"Day02\",\"link\":\"/hr/Day02-登录模块-主页鉴权\"},{\"text\":\"Day03\",\"link\":\"/hr/Day03-主页模块-修改密码\"},{\"text\":\"Day04\",\"link\":\"/hr/Day04-组织架构\"},{\"text\":\"Day05\",\"link\":\"/hr/Day05-组织架构-角色管理\"},{\"text\":\"Day06\",\"link\":\"/hr/Day06-角色管理-员工管理\"},{\"text\":\"Day07\",\"link\":\"/hr/Day07-员工管理-上传下载\"},{\"text\":\"Day08\",\"link\":\"/hr/Day08-Cos上传和权限数据\"},{\"text\":\"Day09\",\"link\":\"/hr/Day09-权限应用-首页\"},{\"text\":\"Day10\",\"link\":\"/hr/Day10-首页图表-Nginx上线\"}]}],\"/hmzs/\":[{\"text\":\"黑马智数\",\"items\":[{\"text\":\"初始化项目\",\"link\":\"/hmzs/前台可视化/01-项目环境搭建\"},{\"text\":\"大屏可视化\",\"link\":\"/hmzs/前台可视化/02-大屏可视化\"},{\"text\":\"接入微前端\",\"link\":\"/hmzs/前台可视化/03-接入微前端\"},{\"text\":\"部署上线\",\"link\":\"/hmzs/前台可视化/04-部署上线说明\"}]}],\"/mini-rabbit/\":[{\"text\":\"小兔仙\",\"items\":[{\"link\":\"/mini-rabbit/01-项目\",\"text\":\"01-项目准备\"},{\"link\":\"/mini-rabbit/02-首页\",\"text\":\"02-首页模块\"},{\"link\":\"/mini-rabbit/03-推荐\",\"text\":\"03-推荐模块\"},{\"link\":\"/mini-rabbit/04-分类\",\"text\":\"04-分类模块\"},{\"link\":\"/mini-rabbit/05-登录\",\"text\":\"05-登录模块\"},{\"link\":\"/mini-rabbit/06-地址\",\"text\":\"06-地址模块\"},{\"link\":\"/mini-rabbit/07-详情\",\"text\":\"07-详情模块\"},{\"link\":\"/mini-rabbit/08-SKU\",\"text\":\"08-SKU模块\"},{\"link\":\"/mini-rabbit/09-购物车\",\"text\":\"09-购物车模块\"},{\"link\":\"/mini-rabbit/10-订单\",\"text\":\"10-订单模块\"}]}],\"/memory/\":[{\"text\":\"需要记忆的内容\",\"items\":[{\"link\":\"/memory/\",\"text\":\"需要记忆的内容\"}]}],\"/ts/\":[{\"text\":\"TypeScript\",\"items\":[{\"text\":\"TypeScript起步\",\"link\":\"/ts/\"},{\"text\":\"TypeScript核心\",\"link\":\"/ts/core\"},{\"text\":\"TypeScript进阶\",\"link\":\"/ts/advanced\"},{\"text\":\"TypeScript应用\",\"link\":\"/ts/pro\"},{\"text\":\"TS黑马头条案例\",\"link\":\"/ts/case\"}]}],\"/vue3/\":[{\"text\":\"Vue3核心\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/vue3/\"},{\"text\":\"组合式API\",\"link\":\"/vue3/composition\"},{\"text\":\"综合案例\",\"link\":\"/vue3/case\"}]}],\"/pinia/\":[{\"text\":\"Pinia\",\"items\":[{\"text\":\"Pinia 核心\",\"link\":\"/pinia/\"}]}],\"/project/\":[{\"text\":\"优医问诊H5项目课程\",\"items\":[{\"text\":\"1. 项目起步\",\"link\":\"/project/\"},{\"text\":\"2. 登录模块\",\"link\":\"/project/login\"},{\"text\":\"3. 用户模块\",\"link\":\"/project/user\"},{\"text\":\"4. 首页模块\",\"link\":\"/project/home\"},{\"text\":\"5. 极速问诊\",\"link\":\"/project/consult\"},{\"text\":\"6. 医生问诊室\",\"link\":\"/project/room\"},{\"text\":\"7. 问诊订单模块\",\"link\":\"/project/consult-order\"},{\"text\":\"8. 药品订单模块\",\"link\":\"/project/order\"},{\"text\":\"9. 其他扩展\",\"link\":\"/project/end\"},{\"text\":\"辅助-超级医生\",\"link\":\"/project/super-doctor\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/luckybo0027\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2022-present Shugang Zhou 传智教育\"},\"lastUpdatedText\":\"更新\",\"outline\":\"deep\"},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
</html>